<template>
  <div id="subject">
    <ul class="sub_ul">
      <li v-for="v in subject.data" :key="v.id">
        <img :src="v.scene_pic_url" alt="" width="100%" />
        <h2>{{ v.title }}</h2>
        <h3 class="van-ellipsis">{{ v.subtitle }}</h3>
        <h4>￥ {{ v.price_info }} 元起</h4>
      </li>
    </ul>
    <van-pagination
      v-model="currentPage"
      :total-items="125"
      :show-page-size="0"
      force-ellipses
      :page-count="subject.totalPages"
      @change="fun()"
    />
    <h1 class="kong1"></h1>
  </div>
</template>

<script>
import {Toast} from 'vant'
import { GetSubject } from "@/request/api";
export default {
  data() {
    return {
      subject: "",
      currentPage: 1,
    };
  },

  components: {},

  created(v) {
    GetSubject({ page: v }).then((res) => {
      // console.log(res);
      this.subject = res.data;
      // console.log(this.subject);
    });
  },
  beforeCreate() {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 1000,
    });
  },
  methods: {
    fun() {
      GetSubject({ page: this.currentPage }).then((res) => {
        this.subject = res.data;
      });
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>
<style lang='less' scoped>
#subject {
  .sub_ul {
    background-color: #efefef;
    li {
      text-align: center;
      background-color: rgb(255, 255, 255);
      margin-bottom: 0.2rem;
      padding-bottom: 0.05rem;
      h2 {
        font-size: 0.18rem;
        line-height: 0.4rem;
      }
      h3 {
        font-size: 0.16rem;
        line-height: 0.4rem;
      }
      h4 {
        font-size: 0.12rem;
        color: #9b0000;
        line-height: 0.4rem;
      }
    }
  }
  h1 {
    width: 100%;
    height: 1rem;
  }
}
</style>